import React from 'react';
import SelectType from 'views/component/selectType';
import { ShopApi } from 'js/api/shop';
import XDate from 'xdate';
import echarts from 'js/lib/echarts';
import $ from 'jquery';
import './flowWeather.scss';
import moment from 'moment';
import { DatePicker, Icon } from 'antd-mobile';

let HOLIDAY_CODE = { 1: '元旦', 2: '春节', 3: '情人节', 4: '妇女节', 5: '清明节', 6: '劳动节', 7: '端午节', 8: '中秋节', 9: '国庆节', 10: '圣诞节' };
const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
const monthType = ['上旬', '中旬', '下旬'];
const timeData = [{ id: 'hour', name: '时' }, { id: 'day', name: '日' }, { id: 'month', name: '月' }];
let chartFontSize = parseInt(window.fontSize / 4);

const FlowWeather = React.createClass({
    getInitialState() {
        return { year: new Date().getFullYear(), temperatureLoading: true, weatherLoading: true }
    },
    componentDidMount() {
        this.getTemperatureEChartData();
        this.getWeatherEChartData();
    },
    getTemperatureEChartData() {
        let query = {
            ShopId: this.props.shopId,
            flowDataType: this.props.flowDataType,
            Year: this.state.year,
            AreaTypeId: this.props.AreaTypeId,
            AreaId: this.props.AreaId,
            IndustryId: this.props.AreaId
        }
        this.setState({ temperatureLoading: true })
        ShopApi.getTemperatureEChartData(query, (data) => {
            this.setState({ temperatureLoading: false })
            this.setTemperatureEChartData(data);
        });
    },
    getWeatherEChartData() {
        let query = {
            ShopId: this.props.shopId,
            flowDataType: this.props.flowDataType,
            Year: this.state.year,
            AreaTypeId: this.props.AreaTypeId,
            AreaId: this.props.AreaId,
            IndustryId: this.props.AreaId
        }
        this.setState({ weatherLoading: true })
        ShopApi.getWeatherEChartData(query, (data) => {
            this.setState({ weatherLoading: false })
            this.setWeatherEChartData(data);
        });
    },
    setTemperatureEChartData(data) {
        let seriesData1 = [],
            seriesData2 = [],
            total = 0;
        let xAxisData = [
            "-7℃\n以下",
            "-7℃～\n0℃",
            "1℃～\n8℃",
            "9℃～\n16℃",
            "17℃～\n24℃",
            "25℃～\n32℃",
            "33℃\n以上"
        ];
        for (let i in data) {
            if (parseInt(data[i].CAVGDATA) === 0) {
                seriesData1.push('-');
            } else {
                seriesData1.push(data[i].CAVGDATA);
            }
            total += parseInt(data[i].CAVGDATA);
        }
        let max = 0;
        for (let i in data) {
            if (parseInt(data[i].CAVGDATA) === 0) {
                seriesData2.push('-');
                continue
            }
            let per = (parseInt(data[i].CAVGDATA) / total * 100).toFixed(1);
            if (per > max) {
                max = parseInt(per) + 1;
            }
            seriesData2.push(per);
        }
        let option = {
            textStyle: {
                fontSize: chartFontSize
            },
            animation: false,
            color: ['#54A5E6'],
            grid: {
                left: '5%',
                width: '90%',
                height: '70%',
                top: '10%',
            },
            xAxis: {
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    interval: 0,
                    margin: 20,
                    textStyle: {
                        color: '#ccc',
                        fontSize: chartFontSize
                    }
                },
                data: xAxisData
            },
            yAxis: [{
                axisLine: {
                    show: false,
                    onZero: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: false,
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#3f4147'
                    }
                },
                type: 'value'
            }, {
                max: max * 2,
                min: 0,
                type: 'value',
                axisLine: {
                    show: false,
                    onZero: false
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisLabel: false
            }],
            dataZoom: {
                type: 'inside',
                startValue: 0,
                endValue: 5,
            },
            series: [{
                yAxisIndex: 0,
                type: 'bar',
                barWidth: 30,
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: 'top'
                        }
                    }
                },
                label: {
                    normal: {
                        textStyle: {
                            color: '#ccc'
                        }
                    }
                },
                data: seriesData1
            }, {
                yAxisIndex: 1,
                type: 'line',
                lineStyle: {
                    normal: {
                        color: '#7ED53D'
                    }
                },
                label: {
                    normal: {
                        show: true,
                        position: 'bottom',
                        formatter: '{c}%',
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                data: seriesData2
            }]
        };
        if (this.refs.temperatureChart) {
            this.temperatureChart = echarts.init(this.refs.temperatureChart);
            this.temperatureChart.setOption(option);
        }
    },
    setWeatherEChartData(data) {
        let self = this,
            yAxisData = [],
            seriesData1 = [],
            seriesData2 = [],
            max = 0;
        let weatherType = ["晴", "阴", "雨/雪"];
        let color = ['#FFB4C1', '#A979E7', '#78B9F1', '#F4D175'];
        for (let i in data) {
            let d = {
                value: data[i].CDATA,
                itemStyle: {
                    normal: {
                        color: '#78B9F1'
                    }
                }
            };
            yAxisData.push(weatherType[parseInt(data[i].WEATHERCODE) - 1]);
            seriesData1.push(d);
            seriesData2.push(data[i].DAYS);
        }
        for (let i in seriesData2) {
            let value = parseInt(seriesData2[i]);
            if (value > max) {
                max = value;
            }
        }
        let option = {
            textStyle: {
                fontSize: chartFontSize
            },
            animation: false,
            color: ['#54A5E6'],
            grid: {
                width: '76%',
                height: '100%',
                top: '0',
                left: '2%'
            },
            yAxis: {
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false,
                    margin: 15,
                    interval: 0,
                    textStyle: {
                        color: '#9A9A9A',
                        fontSize: chartFontSize
                    }
                },
                data: yAxisData
            },
            xAxis: [{
                axisLine: {
                    show: false,
                    onZero: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: false,
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#3f4147'
                    }
                },
            }, {
                min: 0,
                max: max + 30,
                axisLine: {
                    show: false,
                    onZero: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: false,
                splitLine: {
                    show: false
                }
            }],
            series: [{
                xAxisIndex: 0,
                name: '人数',
                type: 'bar',
                label: {
                    normal: {
                        show: true,
                        formatter: '{c}'
                    }
                },
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: 'right'
                        }
                    }
                },
                data: seriesData1
            }, {
                name: '天数',
                type: 'bar',
                xAxisIndex: 1,
                label: {
                    normal: {
                        show: true,
                        formatter: '{c}天'
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#6E7ED6',
                        label: {
                            show: true,
                            position: 'right'
                        }
                    }
                },
                data: seriesData2
            }]
        };
        if (this.refs.weatherChart) {
            this.weatherChart = echarts.init(this.refs.weatherChart);
            this.weatherChart.setOption(option);
        }
    },
    yearOnChange(date) {
        this.setState({ year: moment(date).year() })
        this.getTemperatureEChartData();
        this.getWeatherEChartData();
    },
    render() {
        return (
            <div id="flowWeather" className="flowContent">
                <div className="flowHead">
                    <div className="title">客流天气图分析</div>
                </div>
                <div className="flex jc-end btn-line">
                    <DatePicker mode="year" maxDate={moment()} minDate={moment().subtract(11, 'years')} onChange={this.yearOnChange} className="right">
                        <div className="btn-select">年份:{this.state.year}<i className="icon-triangle"></i></div>
                    </DatePicker>
                </div>
                <div className="bottomTitle">客流量-温度图</div>
                {
                    this.state.temperatureLoading ? <div className="chart flex-center" key={1}>
                        <Icon type="loading" size={'md'} />
                    </div> : <div className="chart flex-center" ref='temperatureChart' key={2}></div>
                }
                <div className="flex-center bottomCon">
                    <div className="flex-g-1 flex-center"><span className="icon icon1"></span>平均单日客流人次</div>
                    <div className="flex-g-1 flex-center"><span className="icon icon2"></span>单人日人次占比</div>
                </div>
                <div className="bottomTitle">客流量-天气图</div>
                {
                    this.state.weatherLoading ? <div className="chart flex-center flex-g-1" key={3}>
                        <Icon type="loading" size={'md'} />
                    </div> :
                        <div className="flex-center" key={4}>
                            <div className="flex d-column chart flex-col-3">
                                <div className="flex-g-1 flex-center">
                                    <div><span className="icon icon-weather-snow"></span>雨{'/'}雪</div>
                                </div>
                                <div className="flex-g-1 flex-center"><span className="icon icon-weather-cloud"></span>阴</div>
                                <div className="flex-g-1 flex-center"><span className="icon icon-weather-sun"></span>晴</div>
                            </div>
                            <div className="chart  flex-center flex-g-1" ref='weatherChart'></div>
                        </div>

                }
                <div className="flex-center bottomCon">
                    <div className="flex-g-1 flex-center"><span className="icon icon3"></span>平均客流人次</div>
                    <div className="flex-g-1 flex-center"><span className="icon icon4"></span>天数</div>
                </div>
            </div>
        );
    }
})

module.exports = FlowWeather;